<template>
    <div class="async-container">
    <p>defineAsyncComponent组件的页面，切换2G或者3G查看</p>
    <AsyncComponent />
    </div>
</template>

<script>
import { defineComponent, defineAsyncComponent } from 'vue'
import LoadingComponent from './components/AsyncLoading.vue'
import ErrorComponent from './components/AsyncError.vue'

export default defineComponent({
  components: {
    AsyncComponent: defineAsyncComponent({
    loader: () => import('./components/Async.vue'),
    loadingComponent: LoadingComponent,
    errorComponent: ErrorComponent,
    delay: 200,
    timeout: 3000,
    onError(error, retry, fail, attempts) {
      if (error.message.match(/fetch/) && attempts <= 3) {
        // 请求发生错误时重试，最多可尝试 3 次
        retry()
      } else {
        // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
        // 必须调用其中一个才能继续错误处理。
        fail()
      }
    }
  })
}
})
</script>
